2021-10-28 13:48:00

<template>
  <div>
    <div class="box">
      <div class="img_box">
        <van-image
          round
          width=".7rem"
          height=".7rem"
          :src="tInfo ? tInfo.avatar : 'https://img01.yzcdn.cn/vant/cat.jpeg'"
        />
        <!-- 登录 -->
        <van-cell
          v-show="log"
          is-link
          @click="showPopup"
          style="border: none"
          >{{ tInfo.username ? tInfo.username : "点击登录" }}</van-cell
        >

        <!-- 退出 -->
        <!-- <van-icon @click="showPopup()" class="tuichu" name="cross" /> -->

        <van-popup v-model="show">
          <van-form @submit="onSubmit">
            <van-field
              v-model="username"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div style="margin: 16px">
              <van-button round block type="info" native-type="submit"
                >提交</van-button
              >
            </div>
          </van-form>
        </van-popup>
      </div>

      <van-grid :square="true" :column-num="3">
        <van-grid-item icon="label-o" text="我的订单" />
        <van-grid-item icon="bill-o" text="优惠券" />
        <van-grid-item icon="goods-collect-o" text="礼品卡" />
        <van-grid-item icon="star-o" text="我的收藏" />
        <van-grid-item icon="flag-o" text="我的足迹" />
        <van-grid-item icon="point-gift-o" text="会员福利" />
        <van-grid-item icon="location-o" text="地址管理" />
        <van-grid-item icon="setting-o" text="账号安全" />
        <van-grid-item icon="service-o" text="联系客服" />
        <van-grid-item icon="question-o" text="帮助中心" />
        <van-grid-item icon="good-job-o" text="意见反馈" />
      </van-grid>
      <AppTabbar />
    </div>

    <div></div>
  </div>
</template>


<script>
import AppTabbar from "@/components/AppTabbar";
import { GetLogin } from "@/request/api";
import { Dialog } from "vant";
export default {
  data() {
    return {
      show: false,
      username: "libug",
      password: "123456",
      data: [],
      tInfo: "",
      tui: false,
      log: true,
    };
  },

  methods: {
    showPopup() {
      if (!this.tInfo) {
        this.show = true;
        return false;
      }
      // 确认框
      Dialog.confirm({
        title: "登出账号确认",
        message: "您是否想要退出当前账号？",
      })
        .then(() => {
          Tips.Alert("退出登录成功");
          localStorage.clear();
          this.userInfo = "";
        })
        .catch(() => {
          // console.log(8888);
          // Tips.Alert("退出登录成功");
          localStorage.clear();
          this.userInfo = "";
          this.$router.go(0);
        });
    },
    onSubmit(values) {
      // console.log(this.username);
      GetLogin({ username: this.username, pwd: this.password }).then((res) => {
        this.data = res.data.userInfo;
        // console.log(this.data);
        localStorage.setItem("username", JSON.stringify(res.data));
        this.tInfo = JSON.parse(localStorage.getItem("username")).userInfo;
        // console.log(this.tInfo);
        this.show = !this.show;
      });
    },
  },
  created() {
    let User = JSON.parse(localStorage.getItem("username"));
    if (User) this.tInfo = User.userInfo;
  },
  components: {
    AppTabbar,
  },
};
</script>


<style lang="less" scoped>
.van-cell::after {
  display: none;
}
.img_box {
  width: 100%;
  height: 1.05rem;
  display: flex;
  color: #fff;
  background-color: #333;

  .van-image {
    margin-top: 0.18rem;
    margin-left: 0.1rem;
  }
  .van-cell__value {
    border: none;
  }
  .van-cell--clickable {
    background-color: #333;
    width: 80%;
    height: 0.4rem;
    margin-top: 0.3rem;
  }
  .van-cell__value {
    color: white;
  }
}
.tuichu {
  // position: absolute;
  right: 0.3rem;
  top: 0.45rem;
}
// 弹出框
.van-popup {
  width: 90%;
  height: 2.8rem;
  .van-field {
    background-color: #fff;
  }
  .van-cell {
    margin-top: 0.2rem;
  }
  .van-cell__title {
    margin-top: 0.3rem;
  }
  .van-button {
    margin-top: 0.4rem;
    background-color: red;
    border: 0;
  }
}
</style>



